
<template>

  <div> 
        <template v-for="(item,index) in props.menuData">
             <el-menu-item 
             @click="handleClick(item,`${index}-${item.meta.id}`)"
             v-if="!item.children || item.children.length == 0"   
            :index="`${index}-${item.meta.id}`"
        
            :key="`${index}-${item.meta.id}`">                <!--有子菜单 -->
                <!-- <el-icon><setting /></el-icon>
                <span>权限管理</span> -->
                <el-icon size="20">
                    <component :is="item.meta.icon"></component>
                </el-icon>
                    <span>{{item.meta.name}}</span>
            </el-menu-item>

             <el-sub-menu v-else :index="`${index}-${item.meta.id}`">   <!--无子菜单 -->
                <template #title>
                    <el-icon size="20">
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{item.meta.name}}</span>
                </template>
                <tree-menu :index="`${index}-${item.meta.id}`"  
                :menuData="item.children"/>
            </el-sub-menu>

        </template>
     
            

       
        
  </div>
  
</template>
<script setup>
import {useRouter} from 'vue-router'
const props =  defineProps(['menuData'])
//创建router实例
const router = useRouter()
console.log(props)
//点击菜单
const handleClick = (item,active) =>{
    //console.log(item,'item')
  
    router.push(item.meta.path)
}



</script>
<style scoped>

</style>